<template>
	<view class="orderItem" v-if="source.id" @click="goDetail">
		<view class="title-wrapper">
			<view class="title">
				{{ source.customerPetName }}({{source.schemaCaption}})
			</view>
			<view class="status">
				<text v-if="source.status == '0'">运输中</text>
				<text v-else-if="source.status == 1">待自提</text>
				<text v-else-if="source.status == 2">待配送</text>
				<text class="success" v-else-if="source.status == 3">已完成</text>
				<text class="cancel" v-else-if="source.status == 9">已取消</text>
			</view>
		</view>
		<view class="detail-wrapper">
			<view class="detail-box">
				<view v-if="source.orderItems" class="list" style="overflow: hidden;">
					<view class="item" v-if="index<4 || show" v-for="(item,index) in source.orderItems" :key="index">
						<view class="name">
							<text>{{ index + 1 }}.{{ item.productName }}</text>
						</view>
						<view class="weight">
							{{ item.quantity }}件
						</view>
					</view>
				</view>
				<view class="sortCode" v-if="source.sortCode">
					{{ source.sortCode }}
				</view>
			</view>
			<view v-if="source.orderItems.length>4" class="more" @click.stop="show = !show">
				<text>{{ show ?'收起列表':'展开列表'}}</text>
				<uni-icons v-if="show" type="top" size="12" class="icon" color="#F26022"></uni-icons>
				<uni-icons v-else type="bottom" size="12" class="icon" color="#F26022"></uni-icons>
			</view>
			<view class="amount-info-wrapper">
				<view class="quantity">
					共{{ source.orderItems.length }}个品
				</view>
				<!-- <view class="amount" v-if="source.freightAmount != -1 && source.freightAmount != -2">
					合计：{{ source.totalAmount === -1 ? '待定' : source.totalAmount + '元' + (source.freightAmount ? '(含运费:'+source.freightAmount+'元)': '') }}
				</view> -->
				<view class="amount">
					<text>合计：{{ totalCount }}件</text>
				</view>
			</view>
			<view v-if="source.status === 1" class="amount-info-date">
				<text v-if="source.status == 3">交付时间：{{ source.deliverTime }}</text>
				<text v-else-if="source.status == 2">送达时间：{{ source.mayDeliverDate.substring(0,10) }}</text>
				<text v-else>计划送达：{{ source.mayDeliverDate.substring(0,10) }}</text>
			</view>
			<view class="line">

			</view>
		</view>
		<view class="bottom-wrapper">
			<view class="date">
				<text v-if="source.status == 3">交付时间：{{ source.deliverTime }}</text>
				<text v-else-if="source.status == 2">送达时间：{{ source.mayDeliverDate.substring(0,10) }}</text>
				<text v-else-if="source.status != 1">计划送达：{{ source.mayDeliverDate.substring(0,10) }}</text>
			</view>
			<view class="btn-wrapper">
				<view v-if="source.status === 1" class="btn default" @click.stop="remind">
					提醒客户
				</view>
				<view v-if="source.status === 1" @click.stop="convert(2)" class="btn default">
					转配送
				</view>
				<!-- <view v-if="source.status === 2" @click.stop="convert(1)" class="btn default">
					转自提
				</view> -->
				<view v-if="source.status === 1" @click.stop="pickup" class="btn primary">
					确认提货
				</view>
				<view v-if="source.status === 2" @click.stop="delivery" class="btn primary">
					确认收货
				</view>
				<view v-if="showBtn" @click.stop="afterSale" class="btn default">
					发起售后
				</view>
			</view>
		</view>
		<view class="tip-wrapper" v-if="outStock">
			<uni-icons type="info-filled" color="#F26022" size="20"></uni-icons>
			<text>缺货{{ outStock }}件：由城市仓发起退款</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			source: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				show: false
			}
		},
		computed: {
			showBtn() {
				let bool = false;
				if (this.source.status === 3) {
					const deliverTime = new Date(this.source.deliverTime).getTime() + 86400000;
					const nowTime = new Date().getTime();
					bool = deliverTime > nowTime;
				}
				return bool;
			},
			totalCount() {
				let count = 0;
				if (this.source && this.source.orderItems) {
					this.source.orderItems.forEach(item => {
						count += parseInt(item.quantity)
					})
				}
				return count;
			},
			outStock() {
				let quantity = 0;
				let actualQuantity = 0;
				let number = 0;
				this.source.orderItems.forEach(item => {
					quantity += parseInt(item.quantity)
					actualQuantity += parseInt(item.actualQuantity)
				})
				if (quantity > actualQuantity) {
					number = quantity - actualQuantity;
				}
				return number
			}
		},
		mounted() {

		},
		methods: {
			async goDetail() {
				// const data = await this.$api.get('/app/order/getInfo', {
				// 	id: this.source.id
				// })
				if (this.source.status === 1) {
					this.pickup();
				} else if (this.source.status === 2) {
					this.delivery();
				} else {
					uni.navigateTo({
						url: '/subPage_pickup/orderDetail?id=' + this.source.id
					})
				}
			},
			cancelOrder() {
				uni.showModal({
					title: '取消订单',
					content: '是否要取消订单？',
					success: async (e) => {
						if (e.confirm) {
							await this.$api.post('/app/order/cancel', {
								id: this.source.id
							})
							uni.showToast({
								title: '订单已取消'
							})
							this.$emit('refresh')
						}
					}
				})
			},
			convert(type) {
				if (type === 2) {
					uni.navigateTo({
						url: '/subPage_pickup/logistics?id=' + this.source.id
					})
				}
				return
				uni.showModal({
					title: '提示',
					content: type === 2 ? '是否要将该订单转为配送？' : '是否要将该订单转为自提？',
					success: async (e) => {
						if (e.confirm) {
							let url = type === 2 ? '/app/deliver/order/switchToDelivery' :
								'/app/deliver/order/switchToPickup'
							await this.$api.post(url, {
								id: this.source.id
							})
							uni.showToast({
								title: '操作成功'
							})
							this.$emit('refresh')
						}
					}
				})
			},
			delivery() {
				uni.navigateTo({
					url: '/subPage_pickup/delivery?id=' + this.source.id
				})
			},
			pickup() {
				uni.navigateTo({
					url: '/subPage_pickup/pickup?id=' + this.source.id
				})
			},
			async remind() {
				uni.showModal({
					title: '提示',
					content: '是否要发送短信提醒客户提货？',
					success: async (e) => {
						if (e.confirm) {
							const data = await this.$api.post('/app/deliver/order/pick-up-reminder', {
								reminderInfos: [{
									"mobile": this.source.mobilePhone,
									"quantity": this.source.orderItems.length
								}]
							})
							if (data.code === 200) {
								uni.showToast({
									title: '已提醒客户'
								})
							}
						}
					}
				})
			},
			afterSale() {
				uni.navigateTo({
					url: '/subPage_afterSale/selectProducts?id=' + this.source.id
				})
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.orderItem {
		.title-wrapper {
			display: flex;
			align-items: center;
			padding: 20upx 25upx;

			.title {
				font-size: 32upx;
				font-weight: bold;
				flex: 1;
			}

			.status {
				color: #f90;
				font-size: 32upx;

				.cancel {
					color: #777777;
				}

				.success {
					color: #43c259;
				}
			}
		}

		.detail-wrapper {
			border-radius: 8upx;
			margin: 0upx 0;
			padding: 0upx 34upx 0 34upx;

			.detail-box {
				display: flex;
				align-items: center;

				.list {
					flex: 1;
				}

				.sortCode {
					width: 110rpx;
					text-align: center;
					font-size: 46rpx;
					font-weight: bold;
					color: #F26022;
				}
			}

			.item {
				font-size: 28upx;
				display: flex;
				margin-bottom: 10upx;

				&:last-child {
					margin-bottom: 0;
				}

				.name {
					flex: 1;
					color: #5B5B5B;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.weight {
					margin: 0 36upx;
					color: #808080;
				}

				.amount {
					min-width: 100upx;
					color: #2B2B2B;
					text-align: right;
				}
			}

			.more {
				color: #F26022;
				font-size: 28upx;
				text-align: center;
				margin: 10upx 0;

				.icon {
					font-weight: bold;
					margin-left: 6upx;
					transition: .1s linear;
					transform: rotate(180deg);

					&.open {
						transform: scale(.2)
					}
				}
			}

			.line {
				border-bottom: 2upx dashed #DEE0DE;
			}

			.amount-info-date {
				color: #888888;
				font-size: 28rpx;
				margin-top: -10rpx;
				margin-bottom: 10rpx;
			}

			.amount-info-wrapper {
				height: 62upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;

				.quantity {
					color: #B8B8B8;
				}

				.amount {
					color: #000000;
				}

				&.fee {
					.amount {
						color: #2B2B2B;
					}

					.flex {
						flex: 1;
						text-align: center;
					}
				}
			}
		}

		.bottom-wrapper {
			height: 70upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15upx 0;

			.date {
				font-size: 28upx;
				line-height: 28upx;
				color: #999999;
				display: flex;
				align-items: center;
				margin-left: 30upx;

				.order-type {
					margin-right: 10upx;
				}
			}

			.btn-wrapper {
				display: flex;
				align-items: center;
				margin: 10upx 0;
				padding: 0 30upx;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 60rpx;
					min-width: 80rpx;
					padding: 0upx 20upx;
					background-color: #ffffff;
					border: 1upx solid #D6D6D6;
					border-radius: 10upx;
					font-size: 28upx;
					margin-left: 15upx;

					&.primary {
						color: #ffffff;
						background-color: #F26022;
						border-color: #F26022;
					}
				}
			}
		}

		.tip-wrapper {
			display: flex;
			align-items: center;
			font-size: 28upx;
			color: #F26022;
			padding: 0 30upx 20upx 30upx;
		}
	}
</style>
